<template>
    <el-dialog width="980px" :title="title" :visible.sync="visible"  >
        <el-form ref="form" :rules="rules" size="small" :disabled="disableSubmit" :model="model" label-width="160px"  v-loading="loading">
          <el-row>
              <el-col :span="12">
                <el-form-item prop="companyId" label="领用公司">
                    <select-company v-model="model.companyId" ></select-company>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="sumPrice" label="领用金额">
                  <el-input-number disabled :precision="2"  controls-position="right"   v-model="model.sumPrice"></el-input-number>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="receiveDate" label="领用日期">
                <el-date-picker type="date" placeholder="选择日期" v-model="model.receiveDate" ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="dueDate" label="归还日期">
                  <el-date-picker type="date" placeholder="选择日期" v-model="model.dueDate" ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="receiver" label="领用人">
                <el-input placeholder="请输入领用人" v-model="model.receiver"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="telphone" label="联系方式">
                <el-input placeholder="请输入联系方式" v-model="model.telphone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item required label="资产位置">
                <el-col :span="12">
                  <el-form-item prop="locationBuilding">
                    <dict-select-tag
                      v-model="model.locationBuilding"
                      placeholder="请选择建筑"
                      :triggerChange="true"
                      dictCode="building"
                    />

                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="locationFloor">
                    <el-input-number style="width: 145px;"  controls-position="right"  :step="1" placeholder="请输入楼层" v-model="model.locationFloor"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="note" label="备注">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="model.note">
                  </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>

  import Vue from 'vue'
  import SelectCompany from '@/components/SelectCompany'
  import { MessageBox, Message,Notification } from 'element-ui'
  import pick from 'lodash.pick'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { getAction,deleteAction,putAction,postAction } from '@/api/manage'

  export default {
    name: "UseModal",
    components: {SelectCompany
    },
    data () {
      return {
        title:"领用",
        visible: false,
        loading:false,
        disableSubmit:false,
        multipleSelection: [],
        model: {},
        url: {

        },  // 新增资产表单验证
        rules: {
          companyId: [{ required: true, message: '请输入领用公司', trigger: 'change' }],
          dueDate: [{ required: true, message: '请输入归还日期', trigger: 'blur' }],
          receiveDate: [{ required: true, message: '请输入领用日期', trigger: 'blur' }],
          receiver: [{ required: true, message: '请输入领用人', trigger: 'blur' }],
          telphone:[ { required: true, message: '请输入联系电话', trigger: 'blur' }],
          sumPrice:[ { required: true, message: '请输入总价格', trigger: 'blur' }],
          locationBuilding:[ { required: true, message: '请选择资产位置所在建筑', trigger: 'change' }],
          locationFloor:[ { required: true, message: '请选输入产位置所在楼层', trigger: 'blur' }]
        },
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}

    },
    methods: {
      refresh () {

      },
      add (selection,price) {
        if(selection.length==0){
          this.$message.warning("请选择需要领用的资产信息！");
          return;
        }
        this.refresh();
        this.edit({assetIds: selection.map( row => row.id ),sumPrice:price});
      },
      edit (records) {
        // this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
        let that = this;
        if(that.$refs.form){
          that.$refs.form.resetFields();
        }
        that.model = Object.assign({}, records);
        //that.form.setFieldsValue(pick(this.model,'username','sex','realname','email','phone','activitiSync','workNo','telephone','post'))
        this.visible = true;
      },

      handleSubmit () {
        const that = this;
        this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true
            let promise;
            promise = postAction("/assetuse/recevie",Object.assign({}, this.model));
            promise.then(res =>{
              if(res.success){
                this.$message.success(res.message)
                that.$emit('ok');
                that.close();
              }else{
                this.$message.warning(res.message)
              }
            }).finally(() => {
              this.loading = false
            });
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleCancel () {
        this.close()
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
    }
  }
</script>

<style scoped>

</style>
